<!--
 * @Description: 锚点菜单组件属性面板
-->
<template>
  <div class="anchor-point-editor">
    <editor-panel title="锚点菜单属性">
      <div style="padding-top: 20px; margin-bottom: 20px">
        <div class="meunue-block">
          <draggable :list="tabs">
            <div v-for="(item, index) in tabs" :key="item._id" class="rowItem">
              <div>
                <span class="num"> {{ index + 1 }}</span>
                <el-input
                  v-model="item.name"
                  style="width: 190px"
                  placeholder="输入菜单名称，最多6个字"
                  maxlength="6"
                  :change="changeTab(item, index)"
                />
                <div class="label-btn">
                  <a
                    href="#"
                    class="connectBtn"
                    @click="labelComponent(item, index)"
                  >{{ item.labelComponentId ? '重新关联' : '关联' }}</a>
                  <a href="#" class="delBtn" @click="delMenue(index)">删除</a>
                </div>
              </div>
              <div v-if="item.labelComponentId" class="labeled">
                已关联 [{{ item.labelComponentName }}]
              </div>
            </div>
          </draggable>
          <div class="addbtn">
            <el-button size="mini" type="primary" @click="addMenue">
              添加菜单
            </el-button>
          </div>
        </div>
      </div>

      <div class="block-t">
        菜单配置
      </div>
      <el-form
        label-position="left"
        style="margin-top: 10px"
        label-width="50px"
      >
        <el-form-item label="样式">
          <el-radio v-model="styleType" :label="1">
            样式1
          </el-radio>
        </el-form-item>

        <color-picker
          v-for="item in colorArr"
          :key="item.field"
          v-model="$data[item.field]"
          :label="item.label"
          :default-color="item.default"
          @change="colorChange(item.field, $event)"
        />

        <el-form-item label="图标设置" label-width="80px">
          <el-radio-group
            v-model="iconType"
            class="inner-style"
            @change="changeRadio"
          >
            <el-radio :label="1">
              配置图标
            </el-radio>
            <el-radio :label="2">
              不配置图标
            </el-radio>
          </el-radio-group>
          <div v-if="iconType === 1">
            <div
              v-for="(item, index) in tabs"
              :key="item._id"
              class="flex tabs-box"
            >
              <div class="icon-view">
                <div class="upload-wrapper">
                  <image-upload
                    v-model="item.activeIconUrl"
                    :size="60"
                    :gif-size="120"
                    @on-success="handleUploaduccess($event, index, 'active')"
                  />
                </div>
                <div class="pic-desciption">
                  选中态图标
                </div>
              </div>
              <div class="icon-view">
                <div class="upload-wrapper">
                  <image-upload
                    v-model="item.iconUrl"
                    :size="60"
                    :gif-size="120"
                    @on-success="handleUploaduccess($event, index, 'normal')"
                  />
                </div>
                <div class="pic-desciption">
                  非选中态图标
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </editor-panel>
    <el-dialog
      title="关联组件"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="true"
    >
      <span class="label-subtitle">
        以下为组件在页面中实际顺序，若有重复组件请按顺序关联
      </span>
      <div class="label-components">
        <el-radio-group v-model="radio">
          <el-radio
            v-for="item in componentList"
            :key="item._id"
            :label="item._id"
            :disabled="tabs.some((tab) => tab.labelComponentId === item._id)"
            @change="choiceLabel"
          >
            {{ item.name }}
          </el-radio>
        </el-radio-group>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import tool from '@/util/tool'
import { mapGetters, mapMutations } from 'vuex'
import draggable from 'vuedraggable'
import { Toast } from 'vant'
import EditorPanel from '@/components/properties/common/EditorPanel'
import ColorPicker from '@/components/properties/common/ColorPicker'
import ImageUpload from '@/components/properties/common/ImageUpload'

Vue.use(Toast)

export default {
  name: 'AchorPointEditor',
  components: {
    draggable,
    EditorPanel,
    ColorPicker,
    ImageUpload
  },
  props: {
    activityCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dialogVisible: false,
      radio: null,
      currentMenue: -1,
      backgroundColor: '',
      textColor: '',
      activeTextColor: '',
      startColor: '',
      endColor: '',
      styleType: 1,
      iconType: 1,
      tabs: [],
      colorArr: [
        {
          field: 'backgroundColor',
          label: '背景颜色',
          default: '#8300D8'
        },
        {
          field: 'activeTextColor',
          label: '选中态文字颜色',
          default: '#fff'
        },
        {
          field: 'textColor',
          label: '非选中态文字颜色',
          default: '#fff'
        },
        {
          field: 'startColor',
          label: '选中菜单起始颜色',
          default: '#FB586E'
        },
        {
          field: 'endColor',
          label: '选中菜单终点颜色',
          default: '#FF40C9'
        }
      ],
    }
  },
  computed: {
    ...mapGetters('main', ['selectedComponent', 'pageContent']),
    componentList () {
      return this.pageContent.componentList.filter(a => a.code !== 'AnchorPoint')
    }
  },
  mounted () {
    this.fillDataToForm()
  },
  methods: {
    ...mapMutations('main', [
      'editComponent',
      'addComponentListItem',
      'removeComponentListField'
    ]),
    updateComponentData (field, val) {
      let data = {
        _id: this.selectedComponent._id,
        field: field,
        value: val
      }
      this.editComponent(data)
    },
    fillDataToForm () {
      const
        {
          backgroundColor, textColor, activeTextColor, startColor, endColor, styleType, tabs, iconType
        } = this.selectedComponent
      Object.assign(this.$data, {
        backgroundColor, textColor, activeTextColor, startColor, endColor, styleType, iconType,
        tabs: tool.deepCopy(tabs)
      })
    },
    addMenue () {
      const item = {
        name: '',
        labelComponentId: '',
        iconUrl: '',
        activeIconUrl: '',
        _id: tool.guid()
      }
      this.tabs.push(item)
      this.addComponentListItem({
        _id: this.selectedComponent._id,
        field: 'tabs',
        value: { ...item }
      })
    },
    delMenue (index) {
      this.tabs.splice(index, 1)
      this.removeComponentListField({
        _id: this.selectedComponent._id,
        field: 'tabs',
        value: index
      })
    },
    changeTab (item, index) {
      let temp = tool.deepCopy(this.tabs)
      temp.splice(index, 1, item)
      this.updateComponentData('tabs', temp)
    },
    labelComponent (item, index) {
      this.currentMenue = index
      this.radio = item.labelComponentId || null
      this.dialogVisible = true
    },
    choiceLabel (_id) {
      if (this.tabs.filter(item => item.labelComponentId === _id).length) {
        this.radio = this.tabs[this.currentMenue].labelComponentId || null
        Toast('该组件已绑定其他菜单，请选择其他组件')
      } else {
        this.tabs[this.currentMenue].labelComponentId = _id
        const name = this.componentList.filter(item => item._id === _id)[0].name
        this.tabs[this.currentMenue].labelComponentName = name
        this.currentMenue = -1
        this.changeTab(this.currentMenue, this.tabs[this.currentMenue])
        this.dialogVisible = false
      }
    },
    colorChange (field, val) {
      this.updateComponentData(field, val)
    },
    changeRadio (radio) {
      this.updateComponentData('iconType', radio)
      if (radio === 2) {
        this.tabs.forEach((item, index) => {
          item.activeIconUrl = ''
          item.iconUrl = ''
          this.changeTab(item, index)
        })
      }
    },
    handleUploaduccess (data, index, status) {
      if (status === 'active') {
        this.tabs[index].activeIconUrl = data
      } else {
        this.tabs[index].iconUrl = data
      }
      this.changeTab(index, this.tabs[index])
    }
  },
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>